<template>
  <div class="school">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
  </div>
</template>

<script>
  import pubsub from "pubsub-js";

  export default {
    name: "School",
    props: ['getSchoolName'],
    data() {
      return {
        name: "尚硅谷",
        address: "北京昌平",
        pubId: ""
      };
    },
    methods: {
      demo(msgName, data) {
        console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data)
      }
    },
    mounted() {
      // console.log(window.x);
      // console.log('School', this.x.$on, this.$on);
      /* this.$bus.$on('hello', (data) => {
        console.log('我是School组件，收到了数据', data);
      }) */
      /* this.pubId = pubsub.subscribe('hello', function(msgName, data) {
        // 普通函数 this指向是undefined
        console.log(this)
        console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data)
      }) */

      /* this.pubId = pubsub.subscribe('hello', (msgName, data) => {
        // 箭头函数 this指向是组件
        console.log(this)
        console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data)
      }) */

      // 订阅消息
      this.pubId = pubsub.subscribe('hello', this.demo)
    },
    beforeDestroy() {
      // 傀儡总线上面有许多事件 当vc销毁 需要解绑特定的事件 减少性能消耗
      // this.$bus.$off('hello')
      // 取消订阅
      pubsub.unsubscribe(this.pubId)
    }
  };
</script>

<style scoped>
  .school {
    background-color: rgb(14, 158, 91);
    padding: 5px;
  }
</style>